<template>
  <view class="item-event">
    <view class="main-content" @click="goEventsDetail(props.item)">
      <view class="image-view" :class="props.item.timeStatus?.status === 4 ? 'over '+ props.orgin : props.orgin">
        <image class="image-class" :src="props.item.imageUrl || props.item.coverImage" mode="aspectFill"/>
        <view class="status" :style="getStatusStyle()" v-if="props.type === 'events'">{{props.item.timeStatus?.statusName}}</view>
      </view>
      <view class="text-view">
        <view style="flex:1">
          <view class="view-title">
            <view style="flex: 1">
              <view class="u-line-2">
                {{ props.item.eventsName || props.item.activityName }}
              </view>
            </view>
            <view v-if="props.orgin === 'home'" class="distance" @click.stop="openLocation(props.item)">
              {{distanceStr}}
            </view>
          </view>
          <view class="view-date" v-if="props.type === 'events'">
            活动时间：{{ getShowTime(props.item.eventsStartDate) }}
          </view>
          <view class="view-date" v-if="props.type === 'activity'">
            <view style="color:#F0831E;font-weight: bold;" v-if="props.item.timeStatus?.status === 1">活动即将开始</view>
            <view style="display:flex;color:#F0831E;font-size:12px;font-weight: bold;" v-if="props.item.timeStatus?.status === 2">
              距开奖还剩
              <uni-countdown :day="countdownTime.day" :hour="countdownTime.hour" :minute="countdownTime.minute" :second="countdownTime.second" :start="countdownTime.start" @timeup="timeup" :show-colon="false" color="#F0831E" splitorColor="#F0831E" :font-size="12"></uni-countdown>
            </view>
            <view style="color:#414141;font-weight: bold;" v-if="props.item.timeStatus?.status === 3">已开奖</view>
          </view>
          <view class="part-active" v-if="props.orgin === 'list'">
            <view class="avater-i">
              <image class="img" :src="item || 'https://img.qumoyugo.com/img/KVMDUYZENP1FULBFYB9PG1701333601947.png'" mode="aspectFill" v-for="(item, index) in avatarImageList" :key="index"></image>
            </view>
            <view v-if="props.type === 'events'">
              {{ props.item.personNum ? props.item.personNum + '人已参加' : props.item.timeStatus.status > 2 ? '' : '虚席以待'}}
            </view>
            <view v-if="props.type === 'activity'">
              {{ props.item.ownerNum ? props.item.ownerNum + '人已参加' : '虚席以待' }}
            </view>
          </view>
        </view>
        <!-- <view class="button-content" v-if="props.orgin === 'list' && props.type === 'events'">
          <view class="button-view" :class="props.item.eventsOrderId && props.item.timeStatus.status === 1 ? 'yellow' : ''">
            去看看
          </view>
        </view> -->
        <view class="button-content" v-if="props.orgin !== 'home'">
          <view class="button-view">
            去看看
          </view>
        </view>
      </view>
    </view>
    <SelfToast ref="joinActivToast" type="center" title="" :content="contentActivToast"></SelfToast>
    <TipPopup ref="tipPopup" :option="{
      subTitle: '您已报名，点击查看订单',
      img: 'https://img.qumoyugo.com/img/MASBUOYAFA2TETSL7XU7G1698919148763.png',
      click: true
    }">
      <view class="order-btn u-center" style="width:280rpx" @click="gotoPage">去看看</view>
    </TipPopup>
    <TipPlain ref="tipPopupPlain" :option="{
      subTitle: '长按识别联系报名'
    }">
      <view class="img-code">
        <image src="https://img.qumoyugo.com/webimgbg/picopino_code_feiziy_events.png" style="width: 270rpx;height: 270rpx;" show-menu-by-longpress></image>
      </view>
    </TipPlain>
  </view>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
// import Http from '@/utils/requset'
import TipPopup from '@/components/popup/tipPopup'
import TipPlain from '@/components/popup/plain'
import SelfToast from '@/components/SelfToast'
const emit = defineEmits(['jump', 'timeup'])
const contentActivToast = ref('')
const joinActivToast = ref(null)
const tipPopup = ref(null)
const tipPopupPlain = ref(null)
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  orgin: {
    type: String,
    default: 'list'
  },
  type: {
    type: String,
    default: 'events'
  }
})
const goEventsDetail = data => {
  if (props.type === 'activity') {
    uni.navigateTo({ url: `/events/eventsMarket?id=${data.id}` })
  }
  if (props.type === 'events') {
    uni.navigateTo({ url: `/events/eventsDetail?id=${data.id}` })
  }
}
const openLocation = data => {
  uni.openLocation({
    type: 'gcj02',
    latitude: Number(data.latitude),
    longitude: Number(data.longitude),
    scale: 18,
    name: data.locationName,
    address: data.eventsAddress
  })
}
const countdownTime = ref({
  day: 0,
  hour: 0,
  minute: 0,
  second: 0,
  start: false
})
const isFirst = ref(true)
onMounted(() => {
  if (props.type === 'activity' && props.item.timeStatus?.status === 2) {
    getCountdownTime(props.item.serverTime, props.item.endTime)
  }
})
watch(() => countdownTime.value, (newV) => {
  isFirst.value = false
})
const getCountdownTime = (startTime, endTime) => {
  startTime = startTime.replace(/-/g, '/')
  endTime = endTime.replace(/-/g, '/')
  const current = new Date(endTime) - new Date(startTime)
  countdownTime.value = {
    day: Math.floor(current / 1000 / 24 / 60 / 60),
    hour: Math.floor((current % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minute: Math.floor((current % (1000 * 60 * 60)) / (1000 * 60)),
    second: Math.floor((current % (1000 * 60)) / 1000),
    start: true
  }
}
const distanceStr = computed(() => {
  const distance = props.item.distance || 0
  return distance < 1 ? (distance * 1000).toFixed(2) + 'm' : distance.toFixed(2) + 'km'
})
const avatarImageList = computed(() => {
  let _img = props.item.avatarImageList || []
  if (!_img.length) {
    _img = ['', '', '']
  }
  return _img.slice(0, 8)
})
const getShowTime = (item) => {
  if (props.type === 'events' && item) {
    const _time = item.split('-')
    return _time[0].substr(5) + '-' + _time[1].substr(5)
  }
}
const getStatusStyle = () => {
  switch (props.item.timeStatus?.status) {
    case 1:
      return {
        color: '#000',
        backgroundColor: 'rgba(240, 233, 92, 0.9)'
      }
    default:
      return {
        color: '#fff',
        backgroundColor: 'rgba(0, 0, 0, 0.6)'
      }
  }
}
const gotoPage = () => {
  tipPopup.value.close()
  uni.navigateTo({ url: `/user/order/eventsDetail?eventsId=${props.item.id}&orderId=${props.item.eventsOrderId}` })
}
const timeup = () => {
  if (!isFirst.value) {
    emit('timeup', props.item.id)
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.item-event {
  display: block;
  margin-bottom: 10rpx;
  flex-direction: row;
  align-items: center;
  border-radius: 20rpx;
  background-color: #ffffff;
  padding: 20rpx;
  .main-content {
    display: flex;
    .image-view {
      width: 220rpx;
      min-width: 220rpx;
      height: 292rpx;
      background: #f4f4f4;
      border-radius: 18rpx;
      position: relative;
      overflow: hidden;
      &.over{
        &::before{
          position: absolute;
          content: '';
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          background-color: rgba(255,255,255,0.7);
        }
      }
      &.home{
        width: 180rpx;
        height: 240rpx;
        min-width: 180rpx;
      }
      .image-class {
        width: 100%;
        height: 100%;
        background: #f4f4f4;
        border-radius: 20rpx;
      }
      .status{
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        text-align: center;
        width: 220rpx;
        color: #fff;
        position: absolute;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
        font-weight: bold;
      }
    }
    .text-view {
      flex: 1;
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;
      font-size: 22rpx;
      color: #414141;
      .distance{
        color: #3289CA;
        font-size: 28rpx;
        font-weight: normal;
        padding-left: 10rpx;
      }
      .view-title {
        margin: 10rpx 0 20rpx 0;
        font-size: 34rpx;
        font-weight: bold;
        color: #000;
        display: flex;
        justify-content: space-between;
        line-height: 40rpx;
      }
      .view-date {
        font-size: 12px;
        color: #414141;
      }
      .part-active{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
      }
      .avater-i{
        max-width: 260rpx;
        padding: 0 10rpx;
        height: 24px;
        overflow: hidden;
        .img{
          width:20px;
          height: 20px;
          border-radius: 50%;
          border: 2px solid #fff;
          margin-left: -10rpx;
        }
      }
    }
  }
  .button-content {
    display: flex;
    justify-content: flex-end;
    .button-view {
      width: 180rpx;
      height: 64rpx;
      background: #000;
      border-radius: 100px;
      font-size: 28rpx;
      font-weight: bold;
      color: #F9C687;
      line-height: 64rpx;
      text-align: center;
      &.yellow{
        background:#FCDBAB;
        color: #414141;
      }
    }
  }
  .order-btn{
    margin: 0 auto;
    position: relative;
    width: 250rpx;
    height: 74rpx;
    background: #F7B064;
    font-size: 30rpx;
    color: #000;
    border-radius: 1000px;
    &::before{
      @include border(full, #414141, 1000px)
    }
  }
  .img-code{
    width: 270rpx;
    height: 270rpx;
    margin: 20rpx auto;
  }
}
</style>
